<template>
	<!-- empty-view-img="/static/image/order-empty.png"  -->
	<z-paging ref="paging" v-model="list" @query="getList" empty-view-text="暂无数据"
		:empty-view-img-style="{width:'150rpx',height:'150rpx'}" :empty-view-title-style="{marginTop: '30rpx'}">
		<template #refresher="{refresherStatus}">
			<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
			<custom-refresher :status="refresherStatus" />
		</template>
		<view class="pad-left-right-24">
			<view class="bg-white radius20 centerY pad-top-30">
				<view class="datetime betweenX" @click="showDate = true">
					<view class="color-646464">{{datetimeVal}}</view>
					<up-icon name="arrow-down" size="24rpx"></up-icon>
				</view>
				<view class="input-box mar-left-24">
					<up-search @custom="hanldeSearch" @search="hanldeSearch" placeholder="搜索编号"
						v-model="waterMeterCode"></up-search>
				</view>
			</view>

			<view class="table font-28" v-if="list.length > 0">
				<view class="row th">
					<view class="td width1">时间</view>
					<view class="td width2">水表编号</view>
					<view class="td width3">上报读数</view>
					<view class="td width4">用水量</view>
				</view>
				<view class="row color-646464" v-for="item in list" :key="item.id">
					<view class="td width1">{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM')}}</view>
					<view class="td width2">{{item.water_meter_code}}</view>
					<view class="td width3">{{item.new_number}}</view>
					<view class="td width4">{{item.consumption}}</view>
				</view>
			</view>
		</view>

		<up-datetime-picker @cancel="showDate=false" @confirm="hanldeDatetime" :show="showDate" v-model="datetime"
			mode="year-month" format="YYYY-MM"></up-datetime-picker>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue';
	import { waterMeterBill } from '@/api/currency.js';
	import { timeFormat } from '@/node_modules/uview-plus';

	const list = ref([]);
	const showDate = ref(false);
	const datetime = ref(Date.now());
	const value = ref("");
	const paging = ref(null);
	const datetimeVal = ref(timeFormat(datetime.value, 'yyyymm'));

	const hanldeDatetime = (e) => {
		getList(1, 10);
		console.log(e, timeFormat(e.value, 'yyyymm'));
		datetimeVal.value = timeFormat(e.value, 'yyyy-mm');
		showDate.value = false;
	}

	// 水表编号
	const waterMeterCode = ref('');
	// 搜索回调
	const hanldeSearch = (e) => {
		getList(1, 10);
	};

	// 获取列表数据
	const getList = (page, pageSize) => {
		waterMeterBill({
			page,
			ps: pageSize,
			month: timeFormat(datetime.value, 'yyyymm'),
			water_meter_code: waterMeterCode.value
		}).then(res => {
			if (res?.code == 200) {
				paging.value.complete(res.data.data);
			} else {
				paging.value.complete(false);
			}
		})
	}
</script>

<style scoped>
	.table {
		width: 100%;
		margin-top: 50rpx;
		display: table;
		border-left: 1rpx solid #D5D5D5;
		border-top: 1rpx solid #D5D5D5;
	}

	.datetime {
		width: 240px;
		border: 1rpx solid #D5D5D5;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 6rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.row {
		display: table-row;
	}

	.td {
		display: table-cell;
		padding: 10rpx;
		box-sizing: border-box;
		border-right: 1rpx solid #D5D5D5;
		border-bottom: 1rpx solid #D5D5D5;
		vertical-align: middle;
	}


	.th {
		background: #F2FAFD;
	}

	.width1 {
		width: 280rpx;
	}

	.width2 {
		width: 150rpx;
	}

	.width3 {
		width: 150rpx;
	}

	.width4 {
		width: 120rpx;
	}

	.input-box {
		width: 100%;
	}
</style>